import React, { useState, useEffect } from 'react'
import Record from '../../images/record.png'
import Share from '../../images/share.png'
import Star from '../../images/star.png'
import IsStarIcon from '../../images/is-star-icon.png'
import Collect from '../../images/collect.png'
import IsCollectIcon from '../../images/douyin-collected.png'
import AddIcon from '../../images/addIcon.png'
import Comment from '../../images/comment.png'
import './index.less'

interface IProps {
  avatar: string,
  index: number,
  dataId: string,
  userIsCollected: string,
  userIsLike: boolean,
  simulationDisplayFormCodes: Array<number>,
  handleLikeClick: Function;
  handleCommentClick: Function;
  setCommentPopup: Function;
  handleCollectClick: Function;
  handleShareClick: Function;
}

const ToolRights = ({
  avatar,
  index,
  dataId,
  userIsCollected,
  userIsLike,
  simulationDisplayFormCodes,
  handleLikeClick,
  handleCommentClick,
  setCommentPopup,
  handleCollectClick,
  handleShareClick
}: IProps) => {
  const onHandleLikeClick = () => {
    handleLikeClick(index, dataId)
  }

  const onHandleCommentClick = () => {
    handleCommentClick(dataId)
    setCommentPopup(true)
  }

  const onHandleCollectClick = () => {
    handleCollectClick(index, dataId)
  }

  const onHandleShareClick = () => {
    handleShareClick(dataId)
  }

  return (
    <div
      className={`tools-right ${simulationDisplayFormCodes?.includes(3)
        ? 'tools-right-distance-video'
        : 'tools-right-distance-img'
        }`}
    >
      <div className="avatar">
        <img className='avatar-img' width="100%" height="100%" src={avatar} alt="" />
        <div className='add'>
          <img className='add-icon' src={AddIcon} alt="" />
        </div>
      </div>
      {/* 点赞 */}
      <div className="tools-right-item" onClick={onHandleLikeClick}>
        <img className='starImg' src={userIsLike ? IsStarIcon : Star} alt="" />
        <div className="text">1.7万</div>
      </div>
      {/* 评论 */}
      <div className="tools-right-item" onClick={onHandleCommentClick}>
        <img className='starImg' src={Comment} alt="" />
        <div className="text">抢首评</div>
      </div>
      {/* 收藏 */}
      <div className="tools-right-item" onClick={onHandleCollectClick}>
        <img className='collectImg' src={userIsCollected ? IsCollectIcon : Collect} alt="" />
        <div className="text">1.1万</div>
      </div>
      {/* 分享 */}
      <div className="tools-right-item" onClick={onHandleShareClick}>
        <img className='starImg' src={Share} alt="" />
        <div className="text">分享</div>
      </div>
      <div className="tools-right-item">
        <img className='recordImg' src={Record} alt="" />
      </div>
    </div>
  )
}

export default ToolRights
